{extend name="master/base" /}

{block name="content"}
<style>
    body {
        background-color: #ffffff;
    }

    .zyupload {
        margin: 0 !important;
    }
</style>

<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">分类名称</label>
        <div class="layui-input-block">
            <input type="text" name="cat_name" lay-verify="required" lay-reqtext="名不能为空" placeholder="请输入名" value=""
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">展示</label>
        <div class="layui-input-block">
            <input type="radio" name="is_show" value="1" title="是" checked="">
            <input type="radio" name="is_show" value="0" title="否">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <!-- pid的意思就是父级分类; 如是顶级分类,pid就是0 -->
            <select name="pid" lay-filter="aihao">
                <option value="0">顶级分类</option>
                {volist name='cats' id='vo'}
                <option value="{$vo.id}">{$vo.cat_name}</option>
                {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片上传</label>
        <div class="layui-input-block">
            <div id="zyupload" class="zyupload"></div>
            <input type="hidden" name="cat_img" id="cat_img" value="" />
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script>
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "650px", // 宽度
            height: "400px", // 宽度
            itemWidth: "140px", // 文件项的宽度
            itemHeight: "115px", // 文件项的高度
            url: "/admin/category/upload", // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe"], // 上传文件的类型
            fileSize: 51200000, // 上传文件的大小
            multiple: true, // 是否可以多个文件上传
            dragDrop: true, // 是否可以拖动上传文件
            tailor: true, // 是否可以裁剪图片
            del: true, // 是否可以删除文件
            finishDel: false, // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles,
                allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) { // 文件上传成功的回调方法
                res = JSON.parse(response);
                if (res.status == 'success') {
                    $("#uploadInf").append("<p style='color: green;'>上传成功</p>");
                    $('#cat_img').val(res.cat_img);
                }
            },
            onFailure: function (file, response) { // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) { // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });

    });

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //     // 关闭弹出层
            //     layer.close(index);
            //     var iframeIndex = parent.layer.getFrameIndex(window.name);
            //     parent.layer.close(iframeIndex);
            // });

            console.log(JSON.stringify(data.field));
            // 因为是资源路由,post->/admin/category 就是访问的是/amin/category/save
            $.post('/admin/category', data.field, function (res) {
                if (res.status == 'success') {
                    layer.msg(res.msg, function () {
                        window.location = '/admin/category';
                    });
                } else {
                    layer.msg(res.msg);
                    return false;
                }
            })
            return false;
        });

    });
</script>
{/block}